<template>
    <!--创建一个echarts的容器-->
    <div class="line-echart" ref="chart" :style="{width: width, height: height}"></div>
</template>

<script>
import * as echarts from 'echarts'
import resize from '../resize'

require('echarts/theme/macarons')
export default {
    name: 'LineEchart',
    mixins:[resize],
    props: {
        seriesData: { // 需要显示的数据
            type: Array,
            default: function () {
                return [22, 40, 62, 26, 52, 46]
            }
        },
        width: {
            type: String,
            default: '100%'
        },
        height: { // 高度
            type: String,
            default: '320px'
        },
        title: String, // 标题
        option: {
            type: Object,
            default: function() {
                return {}
            }
        },
        monitor: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {};
    },
    computed: {
        comp_option() {
            let obj = {
                legend: {},
                tooltip: {
                    trigger: 'axis'
                },
                xAxis: {
                    type: 'time',
                    boundaryGap: false, // 是否断点连线
                    axisLine: {
                        show: false,  // 这里的show用于设置是否显示y轴那一条线 默认为true
                    },
                    // axisTick: {
                    //     show: false,  // 是否显示刻度线 默认为true
                    //     alignWithLabel: true
                    // },
                    nameGap: 20
                },
                yAxis: [
                    {
                        type: 'value',
                        nameTextStyle: {
                            fontSize: 14,
                            align: 'middle',
                        },
                        nameLocation: 'end', // 位置在顶部
                        nameGap: 30, // 与y轴距离
                        nameRotate: 0, // 角度
                        min: 0,
                        axisLabel: {
                            margin: 20,
                            show: true,
                            interval: 1,
                            // formatter: '{value}%'
                        },
                        axisLine: {
                            show: false,  // 这里的show用于设置是否显示y轴那一条线 默认为true
                        },
                        axisTick: {
                            show: false,  // 是否显示刻度线 默认为true
                            alignWithLabel: true
                        },
                        splitLine: {    // 网格线
                            lineStyle: {
                                type: 'dashed'    // 设置网格线类型 dotted：虚线   solid:实线
                            },
                            show: true // 隐藏或显示
                        },
                    },
                ],
                grid: { // 图表离面板的距离
                    top: '50px',
                    left: '12px',
                    right: '50px',
                    bottom: '20px',
                    containLabel: true
                },
                series: []
            }

          this.mergeOption(obj, this.option)
          return obj
        }
    },
    watch: {
        seriesData: {
            deep: true,
            handler(val) {
                this.setOption(val)
            }
        }
    },
    mounted() {
        this.chart = echarts.init(this.$refs.chart)
        // 绘制图表
        this.init()
        this.setOption(this.seriesData)
        if (this.monitor) {
            this.chart.on('click', (params) => {
              this.$emit('clicked', params)
            })
        }
    },
    beforeDestroy() {
        if (!this.chart) {
            return
        }
        this.chart.dispose()
        this.chart = null
    },
    methods: {
        init(beforeFn = function () {}) {
            let finalOptions = beforeFn.call(this, this.comp_option) || this.comp_option
            this.chart.setOption(finalOptions)
        },
        setOption(data) {
            if (!data) return
            this.chart.setOption({
                series: data
            })
        },
        mergeOption(defOption, newOption) {
            for (const [k, v] of Object.entries(newOption)) {
                if (Reflect.has(defOption, k)) {
                    let type = Object.prototype.toString.call(v)
                    type = type.split(' ')[1].split(']')[0]
                    switch (type) {
                        case 'Object':
                            let defType = Object.prototype.toString.call(defOption[k])
                            defType = defType.split(' ')[1].split(']')[0]
                            if (defType === 'Object') {
                                this.mergeOption(defOption[k], v)
                            } else {
                                defOption[k] = v
                            }
                            break
                        default:
                            defOption[k] = v
                            break
                    }
                } else {
                    defOption[k] = v
                }
            }
        },
        getDataURL() {
            return this.chart.getDataURL()
        }
    },
};
</script>

<style lang="scss" scoped>
</style>
